<template>
  <div id="tagcol">
    <div class="title">
      <h2 style="font-size: 24px; color: #45bd9e">{{ title }}</h2>
      <img
        style="margin-top: 10px"
        width="154"
        height="241"
        :src="imgurl"
        alt=""
        srcset=""
      />
    </div>
    <div class="tagspage">
      <el-tabs
        v-if="tags.length > 0"
        v-model="def"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="(item, i) in tags"
          :key="i"
          :label="item.name"
          :name="item.name"
        >
          <div class="ml55 itemMain">
            <item-vue
              v-for="(item2, ii) in item.list"
              :key="ii"
              :data="item2"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import itemVue from "./item.vue";

export default {
  data() {
    return {
      activeName: "tag1",
      imgUrl1:
        "https://b1-q.mafengwo.net/s9/M00/6B/86/wKgBs1byYsOAREbHAAJa5lj0Ouk15.jpeg?imageMogr2%2Fthumbnail%2F%21308x482r%2Fgravity%2FCenter%2Fcrop%2F%21308x482%2Fquality%2F100",
    };
  },
  props: ["title", "tags", "imgurl","def"],
  components: {
    itemVue,
  },
};
</script>
<style lang="scss" scoped>
$val55: 30px;
#tagcol {
  display: flex;
  margin-bottom: 60px;
  height: 324px;
  .title {
    width: 154px;
    h2 {
      padding-bottom: 8px;
      border-bottom: 1px solid #f1f1f1;
    }
  }
  .tagspage {
    flex: 1;
    height: 200px;
    .itemMain {
      display: flex;
      width: 845px;
      justify-content: space-around;
    }
  }
}
/deep/.el-tabs__nav-wrap::after {
  height: 1px;
  text-align: center;
}
/deep/.el-tabs__active-bar {
  display: none;
}
/deep/.el-tabs__item.is-active {
  color: #45bd9e;
  font-weight: 700;
}
/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: $val55;
}
/deep/.el-tabs__nav-wrap::after{width: 859px;}
.ml55 {
  margin-left: 23px;
  height: 233px;
  font-size:0
}
</style>